<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例：波仔的学习之旅</title>
</head>
<style>
    .box{
        height:400px;
        width:400px;
        margin: 10px auto;
        border:1px solid #000;
        text-align: center;
    }
    .box button{
        margin-top: 30px;
        margin: 10px 70px;
    }
</style>

<body>
    <div id="app">
        <div class="box"> 
            <img v-bind:src="list[index]" alt="图片加载失败"><br><br>
            <button v-on:click="prev">上一页</button>
            <button v-on:click="next">下一页</button>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            index:5,
            list: [
                '../imgs/11-00.gif', '../imgs/11-01.gif', '../imgs/11-02.gif', '../imgs/11-03.gif', '../imgs/11-04.png', '../imgs/11-05.png',
            ]
        },
        methods: {
            prev(){
                this.index = this.index == 0 ? 5 : this.index - 1 ;
                console.log(this.index);
            },
            next(){
                this.index = this.index == 5 ? 0 : this.index + 1 ;
                console.log(this.index);
            }
        }
    })
</script>

</html>